<template>
  <section class="dashboard-container" v-loading="loading">
     <panel-group :count="todayCount" @handleSetLineChartData="handleSetLineChartData"></panel-group>
     <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
      <line-chart :chart-data="count"></line-chart>
    </el-row>
  </section>
</template>

<script>
  import PanelGroup from './components/PanelGroup'
  import LineChart from './components/LineChart'
  const lineChartData = {
    newVisitis: {
      expectedData: [100, 120, 161, 134, 105, 160, 0],
      actualData: [120, 82, 91, 154, 162, 140, 145]
    },
    messages: {
      expectedData: [200, 192, 120, 144, 160, 130, 140],
      actualData: [180, 160, 151, 106, 145, 150, 130]
    },
    purchases: {
      expectedData: [80, 100, 121, 104, 105, 90, 100],
      actualData: [120, 90, 100, 138, 142, 130, 130]
    },
    shoppings: {
      expectedData: [130, 140, 141, 142, 145, 150, 160],
      actualData: [120, 82, 91, 154, 162, 140, 130]
    }
  }
  export default {
    name: 'dashboard',
    components: {
      PanelGroup,
      LineChart
    },
    data () {
      return {
        lineChartData: lineChartData.newVisitis,
        count: {
          date: [0, 0, 0, 0, 0, 0, 0],
          users: [0, 0, 0, 0, 0, 0, 0],
          comments: [0, 0, 0, 0, 0, 0, 0],
          orders: [0, 0, 0, 0, 0, 0, 0]
        },
        loading: false
      }
    },
    computed: {
      todayCount () {
        return [this.count.users[6], this.count.orders[6], this.count['comments'][6]]
      }
    },
    mounted () {
      this._getData()
    },
    methods: {
      handleSetLineChartData (type) {
        this.lineChartData = lineChartData[type]
      },
      _getData () {
        this.loading = true
        this.$http.get('/dashboard').then((response) => {
          this.count = response.data
          this.loading = false
        }).catch((error) => {
          this.loading = false
          console.log(error)
        })
      }
    }
  }
</script>